<template>
	<view class="content">
		<uni-row class="demo-uni-row">
			<uni-col class="demo-uni-col">
				<view class="weui-box" v-if="title == ''">
					<h3 class=" color_gray">[ 暂无! ]</h3>
				</view>
			</uni-col>
			<uni-col class="demo-uni-col">
				<view v-if="!linkId">
					<uni-section :title="'查询单词 query word'" type="line" titleFontSize="18px">
						<uni-card is-full :is-shadow="true">
							<text class="uni-h6"> <a @tap="goDict($event,{id : Id, lang : lang})"
									class="uline colorBlue"> {{title}} </a></text>
						</uni-card>
					</uni-section>
					<uni-section v-if="subId" :title="'单词构成 word formation'" type="line" titleFontSize="18px">
						<uni-card is-full :is-shadow="true">

							<view class="inline-box uni-h6" v-for="(sub, index) in subs" :key="index">
								<a v-if="sub.subId || sub.linkId" @tap="goNext($event, { title: sub.title })"
									class="colorBlue uline">
									{{ sub.title }}
								</a>

								<text v-else class="color_gray">{{ sub.title }}</text>
								<text class="" v-if="index !== subs.length - 1">+</text>
							</view>
						</uni-card>
					</uni-section>
				</view>
				<view v-else>
					<uni-section :title="'词根 root'" type="line" titleFontSize="18px">
						<uni-card is-full :is-shadow="true">
							<text class="uni-h6">
								<a @tap="goNext2($event, {title : title})" class="colorBlue uline"> {{title}} </a>
							</text>
						</uni-card>
					</uni-section>

					<uni-section :title="'派生词 derivative word'" type="line" titleFontSize="18px">
						<uni-card is-full :is-shadow="true">
							<view class="inline-box uni-h6" v-for="(item, index) in linkWords" :key="index">
								<a @tap="goDict($event, { id: item._id, lang : lang })" class="colorBlue uline">
									{{ item.title }}
								</a>
								<text class=""> , </text>
							</view>
						</uni-card>
					</uni-section>

					<uni-section :title="'同源异形词根 homonym'" type="line" titleFontSize="18px">
						<uni-card is-full :is-shadow="true">
							<view class="inline-box uni-h6" v-for="(item, index) in homoWords" :key="index">
								<a @tap="goNext($event, { title: item.title })" class="colorBlue uline">
									{{ item.title }}
								</a>
								<text class=""> , </text>
							</view>
						</uni-card>
					</uni-section>

					<uni-section :title="'跨语言同源词 cross-linguistic cognates'" type="line" titleFontSize="18px">
						<uni-card is-full :is-shadow="true">
							<view class=" uni-h6" v-for="(item, index) in crossWords" :key="index">
							<view class="inline-box" >
								<text class="uni-box"> {{getLangById(item.lang)}} </text>
								<view class="uni-box" v-for="(it, idx) in item.words" :key="idx">
								<a @tap="goNext3($event)" class="colorBlue uline">
									{{ it }}
								</a>
								<text class=""> , </text>
								</view>
							</view>
							</view>
						</uni-card>
					</uni-section>
				</view>
			</uni-col>

		</uni-row>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: "",
				crossWords:[{
					lang : 2,
					words : ["beau","belle"]
				},{
					lang : 6,
					words : ["bonito","bonita"]
				},{
					lang : 7,
					words : ["bonito","bonita"]
				},{
					lang : 8,
					words : ["bello","bella"]
				}]
			};
		},
		methods: {
			goNext2(event, para) {
				// console.log("subs...",event,para);
				uni.navigateTo({
					url: 'step2?lang=' + this.lang + '&title=' + para.title
				});
			},
			goNext3(event) {
				// console.log("subs...",event,para);
				uni.navigateTo({
					url: 'step3'
				});
			}
		}
	};
</script>
<style>
	@import "index.css";
	.color_gray {
		color: dimgray;
	}
	.uni-box{
		margin-right: 10px;
	}
</style>